<template>
  <div class="navigation">
    <div class="navigation-container">
      <div class="navigation-left">
        <el-image class="logo" fit="cover" :src="logoUrl"></el-image>
      </div>
      <div class="navigation-menu">
        <el-menu mode="horizontal" :default-active="active">
          <template v-for="(item, index) in datas.form.source_list">
            <el-menu-item v-if="!item.children" :key="index" :index="item.id">
              {{ item.title }}
            </el-menu-item>
            <el-submenu v-else :key="index" :index="item.content">
              <template slot="title">{{ item.title }} </template>
              <el-menu-item
                v-for="(child, n) in item.children"
                :key="n"
                :index="`${item.id}_${child.id}`"
              >
                {{ child.title }}
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </div>
      <div class="navigation-right">
        <el-input v-model="searchInput" placeholder="请输入内容" size="medium">
          <el-select slot="prepend" v-model="searchSelect" placeholder="请选择">
            <el-option
              v-for="item in searchOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  props: {
    datas: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      active: 1,
      searchInput: '',
      searchSelect: 1,
      logoUrl: '',
      searchOption: [
        {
          label: '课程',
          value: 1
        },
        {
          label: '商城',
          value: 2
        }
      ]
    }
  },
  created() {
    this.loadSiteInfo()
  },
  methods: {
    change(index) {
      this.active = index
    },
    loadSiteInfo() {
      // 获取配置的logo地址
      this.$http.get(
        'admin/site/config/info/admin/logo',
        {},
        response => {
          const { pc_logo_url: logo } = response.data
          this.logoUrl = logo
        },
        _ => {}
      )
    }
  }
}
</script>

<style scoped lang="scss">
.navigation {
  position: relative;
  background: #ffffff;
  &-container {
    width: 834px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
  }
  &-left {
    width: 188px;
    .logo {
      display: block;
      max-width: 110px;
    }
  }
  &-menu {
    ::v-deep.el-menu {
      border: none;
      .el-menu-item,
      .el-submenu__title {
        height: 50px;
        line-height: 50px;
        padding: 0;
        font-size: 12px;
      }
      .el-menu--popup {
        min-width: 100px;
      }
      li + li {
        margin-left: 30px;
      }
    }
  }
  &-right {
    width: 209px;
    height: 28px;
    background: #f7f7f7;
    border-radius: 3px;
    position: absolute;
    right: 0;
    z-index: 999;
    ::v-deep.el-input-group > .el-input__inner {
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      padding: 0 10px;
      background-color: transparent;
      border: none;
    }
    ::v-deep.el-input-group__append {
      color: #5191ff;
      padding: 0 8px;
      background-color: transparent;
      border: none;
    }
    // 下拉
    ::v-deep.el-input-group__prepend {
      width: 32px;
      border: none;
      font-size: 12px;
    }
  }
}
.el-menu--popup {
  min-width: 100px;
}
.el-menu-item {
  font-size: 12px;
}
</style>
